<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加</title>
	<script src="../../js/layui/layui.js"></script>
	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />

</head>
<body class="childrenBody">
<form class="layui-form" lay-filter="formTest">

	<div class="layui-form-item">
	<input type="hidden" name="shop" id="proid"/>
        <label class="layui-form-label">上传照片</label>
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="headImg">
                <i class="layui-icon"></i>
                <p>点击上传图片，或将图片拖拽到此处</p>
            </div>
        </div>
        <input type="hidden" name="pro_id" />
        <div class="layui-form-item">
			<label class="layui-form-label">权重</label>
			<div class="layui-input-inline">
				<input type="number" class="layui-input newsName" name="weight"
					lay-verify="required" placeholder="请输入权重" />
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
			</div>
		</div>
		<div class="layui-form-item">
        预览图：<input type="hidden" name="url" value="" id="pid" />
        <div class="layui-upload-list" id="demo2"></div>

        <input type="text" id="imgUrls" name="imgUrls" style="display: none;" class="layui-input">
        </div>
    </div>
    </form>
	<script type="text/javascript">
	layui.use(["jquery", "upload", "form", "layer", "element"], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            upload = layui.upload,
            form = layui.form;
        var s = "";
        form.on('submit(formDemo)', function(data){
			  $.post('http://localhost:8080/FiveClothes/productImg/addProImg',data.field,
					  function(res){
				  			var msg;
				  			if(res){
				  				msg="添加成功";
				  			}else{
				  				msg="添加失败";
				  			}
				  			layer.msg(msg, {
					  			  icon: 1,
					  			  time: 2000 //2秒关闭（如果不配置，默认是3秒）
					  			}, function(){
					  				var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
									parent.layer.close(index);//关闭弹出层
									 window.parent.location.reload();//刷新父页面
					  			}); 
				  },'json');
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

        //数据回显
		var json = parent.json;
      	var obj=JSON.parse(json);
       	$("#proid").val(obj.p_id);
       		
        //拖拽上传
        var uploadInst = upload.render({
            elem: '#headImg'
            , url: 'http://localhost:8080/FiveClothes/uploadImg'
            , size: 1000
            , multiple: true
            , number: 7
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    // $('#demo1').attr('src', result); //图片链接（base64）
                    $('#demo2').append('<img src="' + result
                        + '" alt="' + file.name
                        + '"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
                        $("#pid").val(file.name);


                });
            }
            , done: function (res) {
                if (s == "") {
                    s = JSON.stringify(res);
                } else {
                    s = s + "," + JSON.stringify(res);
                };
                localStorage.setItem("address1", s);
            }           
            , error: function () {
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }

        });
    });
	</script>

	<!-- <script type="text/javascript" src="linksAdd.js"></script> -->
</body>
</html>